<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ip-lbs落点情况</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.2.1/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
</head>

<body>
<div style="float:left;width:400px;height: 900px;">
    <div>
        <label for="desc">
            数据范围:
        </label>
        <p id="desc">
            7月AdMonitor数据中mma_lbs不为空的所有日志, by IP分析IP上的位置落点情况
        </p>
        <p>坐标原点是所有lbs的'中心', 坐标值为lbs与中心的差值</p>
    </div>
    <div>
        <input id="iptoq" type="text" placeholder="输入ip地址">
        <button type="submit" onclick="query()">查询</button>
    </div>
    <div>
        <button onclick="randomIp()">随机查一个</button>
    </div>
    <div>
        <p>详情:</p>
        <div id="detail"></div>
    </div>
</div>
<div style="float:left;height: 900px;width: 900px;" id="mycanvas">

</div>
<script>
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(document.getElementById('mycanvas'));
    // 指定图表的配置项和数据
    option = {
        xAxis: {},
        yAxis: {},
        series: [{
            symbolSize: 20,
            data: [
                [-10.0, 8.04],
                [8.0, 6.95],
                [13.0, 7.58],
                [9.0, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.0, -7.24],
                [4.0, 4.26],
                [12.0, 10.84],
                [7.0, 4.82],
                [5.0, 5.68]
            ],
            type: 'scatter',
            emphasis: {
                label: {
                    show: true,
                    formatter: "{@[2]}"
                }
            }
        }],
        dataZoom: [{
            type: "inside"
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    function query() {
        var ip = $("#iptoq").val();
        $.get("/get?key=" + ip, handleResult)
    }

    function randomIp() {
        $.get("/random", handleResult)
    }

    function handleResult(data, status) {
        var ip = data.key;
        var lbs = data.value.split(",");
        var invalid = 0;
        var valid = 0;
        var points = [];

        for (var i = 0; i < lbs.length; i++) {
            var lbss = lbs[i].split("x");
            if (lbss.length !== 3) {
                invalid = invalid + 1;
            } else {
                var x = parseFloat(lbss[0]);
                var y = parseFloat(lbss[1]);
                if (x && y) {
                    valid = valid + 1;
                    points.push([x, y, x.toFixed(4) + "x" + y.toFixed(4)])
                } else {
                    invalid = invalid + 1;
                }
            }
        }

        $("#detail").empty();
        var detail = "";
        detail += "ip: " + ip;
        detail += "有效lbs: " + valid + "个";
        $("#detail").append(detail);


        console.log(points);
        //算中心
        var mx = 0, my = 0;
        for (var j = 0; j < points.length; j++) {
            mx += points[j][0];
            my += points[j][1];
            $("#detail").append("<div>" + points[j][0] + " " + points[j][1] + "</div>");
        }
        mx = mx / points.length;
        my = my / points.length;

        //坐标减中心
        for (var j = 0; j < points.length; j++) {
            points[j][0] = points[j][0] - mx;
            points[j][1] = points[j][1] - my;
        }
        console.log(points);

        option.series[0].data = points;
        myChart.setOption(option);
    }


</script>
</body>

</html>